import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
body {
  background-color: #f0f2f5;
  .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
    background-color: #D1F0E6;
  }
  .ant-menu-item > a:hover,
  .ant-menu-item-selected > a, 
  .ant-menu-item-selected > a:hover {
    color: #18B582;
  }
}
ul,
li{ 
  padding: 0;
  margin: 0;
  list-style: none;
}
a {
  color: #18B582;
  &:hover {
    color: #46C49B;
  }
}
#root {
  height: 100%;
  > div {
    height: 100%;
  }
  .ant-layout {
    height: 100%;
  }
}
.rs-header.ant-layout-header {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0px 16px;
  margin-bottom: 20px;
  background: #18B582;
  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2);
  z-index: 19;
}
.rs-sider.ant-layout-sider {
  height: ${window.innerHeight - 84}px;
  transition: width .2s cubic-bezier(.25, 0, .15, 1), translate .2s cubic-bezier(.25, 0, .15, 1);
  z-index: 14;
  overflow-x: hidden;
  overflow-y: auto;
  backface-visibility: hidden;
  -webkit-overflow-scrolling: touch;
  border-radius: 0 5px 0 0;
  .ant-menu-item:hover, 
  .ant-menu-item-active, 
  .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open, 
  .ant-menu-submenu-active, 
  .ant-menu-submenu-title:hover {
    color: #18B582;
  }
  .ant-menu-vertical .ant-menu-item::after, 
  .ant-menu-vertical-left .ant-menu-item::after, 
  .ant-menu-vertical-right .ant-menu-item::after, 
  .ant-menu-inline .ant-menu-item::after {
    border-color: #18B582;
  }
  .ant-menu-submenu-vertical > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::after, 
  .ant-menu-submenu-vertical-left > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::after, 
  .ant-menu-submenu-vertical-right > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::after, 
  .ant-menu-submenu-inline > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::after, 
  .ant-menu-submenu-vertical > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::before, 
  .ant-menu-submenu-vertical-left > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::before, 
  .ant-menu-submenu-vertical-right > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::before, 
  .ant-menu-submenu-inline > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::before {
    background: linear-gradient(to right, #18B582, #18B582);
  }
  .ant-menu-vertical .ant-menu-submenu-selected, 
  .ant-menu-vertical-left .ant-menu-submenu-selected, 
  .ant-menu-vertical-right .ant-menu-submenu-selected {
    color: #18B582;
  }
  .ant-menu-submenu-selected{
    color: #18B582;
  }
  .ant-menu-inline, 
  .ant-menu-vertical, 
  .ant-menu-vertical-left {
    border-right: none;
  }
}
.rs-content {
  margin: 0 20px;
  > .ant-layout-content {
    padding-bottom: 5px;
    background-color: #FFFFFF;
    border-radius: 5px;
    .ant-tabs-nav .ant-tabs-tab-active,
    .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active {
      color: #18B582;
    }
    .ant-tabs-ink-bar {
      background-color: #18B582;
    }
    .ant-tabs-nav .ant-tabs-tab:hover {
      color: #46C49B;
    }
    .breadCrumb-block{
      padding: 0 20px;
      height:40px;
      display:flex;
      align-items:center;
      background: #F6F6F6;
      .ant-breadcrumb{
        color: #18b582 !important;
        span{
          &:last-child{
            color: #18b582 !important;
          }
        }
      }
    }
  }
}
.rs-grid {
  .ant-table-thead > tr.ant-table-row-hover:not(.ant-table-expanded-row) > td, 
  .ant-table-tbody > tr.ant-table-row-hover:not(.ant-table-expanded-row) > td, 
  .ant-table-thead > tr:hover:not(.ant-table-expanded-row) > td, 
  .ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td {
    background: #D1F0E6;
  }
  .ant-table-tbody > tr.ant-table-row-selected td {
    background: #DFF4ED;
  }
  .ant-table-selection-column .ant-table-column-title {
    display: block;
    min-width: 16px;
  }
}
.ant-pagination-item-active {
  border-color: #18B582 !important;
}
.ant-pagination-item-active:focus, 
.ant-pagination-item-active:hover,
.ant-pagination-item:focus, 
.ant-pagination-item:hover,
.ant-pagination-options-quick-jumper input:hover,
.ant-select-selection:hover {
  border-color: #46C49B !important;
}
.ant-pagination-options-quick-jumper input:focus,
.ant-select-focused .ant-select-selection, 
.ant-select-selection:focus, 
.ant-select-selection:active {
  border-color: #46C49B !important;
  box-shadow: 0 0 0 2px rgba(70, 196, 155, 0.2) !important;
}
.ant-pagination-item-active a,
.ant-pagination-item:focus a, 
.ant-pagination-item:hover a {
  color: #18B582 !important;
}
.ant-pagination-prev:focus .ant-pagination-item-link, 
.ant-pagination-next:focus .ant-pagination-item-link, 
.ant-pagination-prev:hover .ant-pagination-item-link, 
.ant-pagination-next:hover .ant-pagination-item-link {
  color: #18B582 !important;
  border-color: #46C49B !important;
}
.ant-pagination-disabled a, 
.ant-pagination-disabled:hover a, 
.ant-pagination-disabled:focus a, 
.ant-pagination-disabled .ant-pagination-item-link, 
.ant-pagination-disabled:hover .ant-pagination-item-link, 
.ant-pagination-disabled:focus .ant-pagination-item-link {
  color: rgba(0, 0, 0, 0.25) !important;
  border-color: #d9d9d9 !important;
}
.ant-radio-checked .ant-radio-inner,
.ant-radio-wrapper:hover .ant-radio, 
.ant-radio:hover .ant-radio-inner, 
.ant-radio-input:focus + .ant-radio-inner,
.ant-checkbox-wrapper:hover .ant-checkbox-inner, 
.ant-checkbox:hover .ant-checkbox-inner, 
.ant-checkbox-input:focus + .ant-checkbox-inner {
  border-color: #18B582 !important;
}
.ant-radio-input:focus + .ant-radio-inner {
  box-shadow: 0 0 0 3px rgba(70, 196, 155, 0.2) !important;
}
.ant-radio-inner::after,
.ant-checkbox-indeterminate .ant-checkbox-inner::after {
  background-color: #18B582 !important;
}
.ant-radio.ant-radio-disabled .ant-radio-inner {
  border-color: #d9d9d9 !important;
}
.ant-checkbox-checked .ant-checkbox-inner {
  background-color: #18B582 !important;
  border-color: #18B582 !important;
}
.ant-form {
  .ant-input-affix-wrapper:hover .ant-input:not(.ant-input-disabled),
  .ant-input:hover,
  .ant-select-selection:hover,
  .ant-input-number:hover {
    border-color: #46C49B;
  }
  .ant-select-focused .ant-select-selection, 
  .ant-select-selection:focus, 
  .ant-select-selection:active,
  .ant-input:focus,
  .ant-input-number:focus,
  .ant-input-number-focused {
    border-color: #46C49B;
    box-shadow: 0 0 0 2px rgba(70, 196, 155, 0.2);
  }
  .ant-input-number {
    width: 100%;
  }
  .ant-input-number-handler:hover .ant-input-number-handler-up-inner, 
  .ant-input-number-handler:hover .ant-input-number-handler-down-inner {
    color: #46C49B;
  }
  .ant-calendar-picker {
    width: 100%;
  }
  .ant-calendar-picker:hover .ant-calendar-picker-input:not(.ant-input-disabled) {
    border-color: #46C49B;
  }
  .ant-calendar-date:hover,
  .ant-calendar-year-panel-year:hover,
  .ant-calendar-month-panel-month:hover,
  .ant-calendar-decade-panel-decade:hover,
  .ant-calendar-selected-day .ant-calendar-date {
    background: rgba(70, 196, 155, 0.2) !important;
  }
  .ant-calendar-year-panel-selected-cell .ant-calendar-year-panel-year:hover,
  .ant-calendar-month-panel-selected-cell .ant-calendar-month-panel-month:hover,
  .ant-calendar-decade-panel-selected-cell .ant-calendar-decade-panel-decade:hover {
    color: #FFFFFF !important;
  }
  .ant-calendar-today .ant-calendar-date {
    color: #18B582 !important;
    border-color: #18B582 !important;
  }
  .ant-calendar-year-panel-selected-cell .ant-calendar-year-panel-year,
  .ant-calendar-month-panel-selected-cell .ant-calendar-month-panel-month,
  .ant-calendar-decade-panel-selected-cell .ant-calendar-decade-panel-decade {
    background: #18B582 !important;
  }
  .ant-calendar-header a:hover,
  .ant-calendar-year-panel-header a:hover {
    color: #46C49B !important;
  }
}
.ant-btn:hover, 
.ant-btn:focus {
  color: #46C49B;
  border-color: #46C49B;
}
.ant-btn-primary {
  background-color: #18B582;
  border-color: #18B582;
}
.ant-btn-primary:hover, 
.ant-btn-primary:focus {
  color: #FFFFFF;
  background-color: #46C49B;
  border-color: #46C49B;
}
.ant-btn-danger:hover,
.ant-btn-danger:focus {
  color: #FFFFFF;
  background-color: #FF4D4F;
  border-color: #FF4D4F;
}
.ant-btn-background-ghost.ant-btn-primary {
  color: #18B582;
  border-color: #18B582;
}
.ant-btn-background-ghost.ant-btn-primary:hover, 
.ant-btn-background-ghost.ant-btn-primary:focus {
  color: #46C49B;
  border-color: #46C49B;
}
.ant-spin-dot-item {
  background-color: #18B582 !important;
}
.rs-menu-pop {
  .ant-dropdown-menu-item-group-list {
    padding: 0;
    list-style-type: none;
    .ant-dropdown-menu-item:hover, 
    .ant-dropdown-menu-submenu-title:hover {
      background-color: #D1F0E6;
    }
  }
}
.ant-select-dropdown {
  .ant-select-dropdown-menu-item-active,
  .ant-select-dropdown-menu-item:hover {
    background-color: #D1F0E6;
  }
}
.rs-blockModal{
  .ant-modal-body{
    padding: 24px 0 !important;
  }
}

.rs-upload {
  .ant-upload.ant-upload-select-picture-card:hover {
    border-color: #18B582;
  }
  .upload-icon {
    font-size: 24px;
    color: #999999;
  }
  .upload-text {
    margin-top: 8px;
    color: #666666;
  }
}
`;

export { GlobalStyle };